<template>
	<div class="banner">
		<div class="box" :style="{'background-image': `url(${item.image})`}" v-for="(item, index) in list" :key="index">
			<div class="back" @click='handleBack'
				:style="{width:`${clientRect.height}px`, height:`${clientRect.height}px`, top: `${clientRect.top}px`, left:`${clientRect.left}px`}">
				<image mode="widthFix" class="img" src="/static/img/view/back.png"></image>
			</div>
			<div class="text-box">
				<view class="title">{{item.title}}</view>
				<view class="tapsilate">{{item.tapsilate}}</view>
			</div>
			<div class="share"
				:style="{width:`${clientRect.height}px`, height:`${clientRect.height}px`, left:`${clientRect.left}px`}">
				<image class="img" mode="widthFix" src="/static/img/view/sharewechat.svg"></image>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		height,
		top,
		left,
	} from '@/scripts/compatible/clientRect.js'
	import {
		navigateBack
	} from '@/scripts/compatible/pageOptions.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				clientRect: {},
			}
		},
		mounted() {
			this.clientRect_init()
		},
		methods: {
			handleBack() {
				navigateBack()
			},
			clientRect_init() {
				this.clientRect = {
					height,
					top,
					left,
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		padding-bottom: 20px;

		.box {
			height: 200px;
			position: relative;
			background-size: 100%;
			background-color: antiquewhite;

			.back,
			.share {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .4);

				.img {
					width: 16px;
					display: block;
				}
			}

			.share {
				bottom: 20px;
			}

			.text-box {
				height: 200px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;

				.title {
					font-size: 16px;
					direction: rtl;
				}

				.tapsilate {
					font-size: 12px;
					direction: rtl;
					margin-top: 32px;
				}
			}
		}
	}
</style>